<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>transform属性</title>
	<style type="text/css">
	    div{
	    	width:150px;height: 75px;background: yellow;border:1px solid black;
	    }

	    #div2{
	    	/*旋转30度*/
	    	transform:rotate(30deg);  

	    	/*兼容各个浏览器,不同前缀表示不同的浏览器*/
	    	-ms-transform:rotate(30deg); /* IE 9 */
			-moz-transform:rotate(30deg); /* Firefox */
			-webkit-transform:rotate(30deg); /* Safari and Chrome */
			-o-transform:rotate(30deg); /* Opera */


			/*倾斜*/
			/*-webkit-transform:skew(-20deg);*/

            /*比例，放大：大于1，缩小：0-1之间，颠倒：负值*/
			/*-webkit-transform:scale(1.2);*/

            /*变动，位移,参数一：表示左右，+：向右，-：向左；参数二：表示上下，+：向下，-：向上*/
			/*transform:translate(-50px,0px);*/
			/*-webkit-transform:translate(120px,0);
*/
	    }

	</style>
</head>
<body>

    <div>你好。这是第一个div元素。</div>
    <div id="div2">你好。这是另一个div元素。</div>
	
</body>
</html>